<template>
    <div style="border: 1px solid red; margin-top: 20px;">
        <div v-if="route.name == 'DynamicCom'">
            第三个组件
        </div>
        <div v-if="route.name == 'vModel'">
            子组件, 我是v-model子组件 dialog
            <div>
                <button @click="gunabi">关闭</button>
            </div>
            <div>
                isShow:{{ modelValue }}
            </div>
            <input :value="textValue" type="text" @input="change">
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter, } from 'vue-router'
const route = useRoute()
const router = useRouter()
const props = defineProps({
    modelValue: {
        type: Boolean
    },
    textValue:{
        type: String
    }
})

// 通过 update:modelValue事件 控制 父组件传递过来的数据    update: 后面跟传递过来的数据
const emit = defineEmits(['update:modelValue','update:textValue'])
const gunabi = ()=>{
    emit('update:modelValue',false)
}
const change = (e:Event)=>{
    const target = e.target as HTMLInputElement
    console.log(target.value);
    emit('update:textValue',target.value)
}
</script>


<style></style>